

<%--在线引入万能头***************************************************************************************--%>

<!--jstl标签依赖 jsp中引入c标签的时候需要添加依赖-->
<%--<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>taglibs</groupId>
    <artifactId>standard</artifactId>
    <version>1.1.2</version>
</dependency>--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<%--引入jstl标签,这个不算在线引入,在pom中还要引入依赖--%>
<%--核心标签是最常用的 JSTL标签。引用核心标签库的语法如下--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户信息管理系统</title>


    <!--引入 Bootstrap  和 jquery   需要联网！！！！！！！！！！！！-->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<%--如果在线引用jQuery 时  appendTo（） 方法灰色的失效了  试试下面的静态资源应用--%>

   <%-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>员工列表</title>

       &lt;%&ndash;静态资源会被拦截 还要配置mvc&ndash;%&gt;
       <script type="text/javascript"
               src=" ${pageContext.request.contextPath}/static/js/jquery-1.12.4.min.js"></script>
       <link
               href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
               rel="stylesheet">
       <script
               src=" ${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js">

       </script>
--%>



<%--  </head>
      <body>
                      内容
      </body>
      </html> --%>

<%--在线引入万能头********************************************************************************************************--%>

</head>
<body>

<!-- 搭建显示页面 -->
<div class="container">
    <!-- 标题 -->
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD BY PL</h1>
        </div>
    </div>
    <!-- 按钮 -->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
        </div>
    </div>
    <!-- 显示表格数据 -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="check_all"/>
                    </th>
                    <th>#</th>
                    <th>empName</th>
                    <th>gender</th>
                    <th>email</th>
                    <th>deptName</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>

    <!-- 显示分页信息 -->
    <div class="row">
        <!--分页文字信息  -->
        <div class="col-md-6" id="page_info_area"></div>
        <!-- 分页条信息 -->
        <div class="col-md-6" id="page_nav_area">

        </div>
    </div>

    <div>
        <input type="text" name="empName"  id="find" ><span class="help-block"></span>
        <button id="empName_find" >查找</button>

    </div>
</div>

<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@atguigu.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-4">
                            <!-- 部门提交部门id即可 -->
                            <select class="form-control" name="dId">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">员工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@atguigu.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-4">
                            <!-- 部门提交部门id即可 -->
                            <select class="form-control" name="dId">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>




<script type="text/javascript">


    /*自己添加的查找功能*/
    $("#empName_find").click(function(){
        var empName = $("#find").val();
        if(empName!=""){
            $.ajax({
                url:"${pageContext.request.contextPath}/find",
                data:"empName="+empName,
                type:"get",
                success:function(result){
                    var pn = result.extend.pn;
                    if(result.code==100){
                        show_validate_msg("#find","success","已为你找到用户信息");
                        to_page(pn);
                    }else{
                        show_validate_msg("#find","error","用户名不存在");
                    }
                }
            })  };
        return false;
    });














    /****************************************************************************************************************/
    var totalRecord,currentPage;
    //1、页面加载完成以后，直接去发送ajax请求,要到分页数据
    $(function(){
        //去首页
        to_page(1);
    });

    function to_page(pn){

        $("#check_all").prop("checked",false);     //全选按钮恢复为不选中

        $.ajax({
            url:" ${pageContext.request.contextPath}/emps",
            data:"pn="+pn,
            type:"GET",

            success:function(result){

                //1、解析并显示员工数据
                build_emps_table(result);
                //解析显示分页信息           当前1页,总1页,总1条记录
                build_page_info(result);

                //翻页
                build_page_nav(result);

            }
        });
    }

    function build_emps_table(result) {
        //清空table表格
        $("#emps_table tbody").empty();

        var emps = result.extend.pageInfo.list;          //从result中得到list集合并展示
        $.each(emps, function (index, item) {
            var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender == 'M' ? "男" : "女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            /**
             <button class="">
             <span class="" aria-hidden="true"></span>
             编辑
             </button>
             */

            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
            //为编辑按钮添加一个自定义的属性，来表示当前员工id
            editBtn.attr("edit-id", item.empId);


            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            //为删除按钮添加一个自定义的属性来表示当前删除的员工id
            delBtn.attr("del-id", item.empId);


            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            //var delBtn =
            //append方法执行完成以后还是返回原来的元素
            $("<tr></tr>").append(checkBoxTd)
                .append(empIdTd)
                .append(empNameTd)
                .append(genderTd)
                .append(emailTd)
                .append(deptNameTd)
                .append(btnTd)

                .appendTo("#emps_table tbody");      //加到表格体中
        });
    }

    //解析显示分页信息
    function build_page_info(result){
        $("#page_info_area").empty();
        $("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页,总"+
            result.extend.pageInfo.pages+"页,总"+
            result.extend.pageInfo.total+"条记录");
        totalRecord = result.extend.pageInfo.total;
        currentPage = result.extend.pageInfo.pageNum;
    }

    //解析显示分页条，点击分页要能去下一页....

    function build_page_nav(result){                   //
        //page_nav_area
        $("#page_nav_area").empty();

        var ul = $("<ul></ul>").addClass("pagination");

        //构建元素
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if(result.extend.pageInfo.hasPreviousPage == false){                                 ////是否有前一页
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            //为元素添加点击翻页的事件
            firstPageLi.click(function(){
                to_page(1);
            });
            prePageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum -1);
            });
        }



        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
        if(result.extend.pageInfo.hasNextPage == false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            nextPageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum +1);
            });
            lastPageLi.click(function(){
                to_page(result.extend.pageInfo.pages);
            });
        }


        //添加首页和前一页 的提示
        ul.append(firstPageLi).append(prePageLi);
        //1,2，3遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){

            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if(result.extend.pageInfo.pageNum == item){
                numLi.addClass("active");
            }
            numLi.click(function(){
                to_page(item);
            });
            ul.append(numLi);
        });
        //添加下一页和末页 的提示
        ul.append(nextPageLi).append(lastPageLi);

        //把ul加入到nav
        var navEle = $("<nav></nav>").append(ul);
        $("#page_nav_area").append(navEle)

        navEle.appendTo("#page_nav_area");
    }
   /*********************************          以上首页展示              *******************************************/
   /****************************************************************************************************************/



   //点击新增按钮弹出模态框。
   $("#emp_add_modal_btn").click(function(){
       //清除表单数据（表单完整重置（表单的数据，表单的样式））
       reset_form("#empAddModal form");
       //s$("")[0].reset();
       //发送ajax请求，查出部门信息，显示在下拉列表中
       getDepts("#empAddModal select");
       //弹出模态框                                       一开始是隐藏的 class="modal fade" id="empAddModal"
       $("#empAddModal").modal({
           backdrop:"static"  /*backdrop 布尔值 true 包括一个对话框背景元素. 另外 static(false情况) 背景下, 点击对话框外的区域不会关闭对话框.
为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。
为false时，无背景。*/
       });
   });


   //清空表单样式及内容            每次新增前把上次的内容重置
   function reset_form(ele){
       $(ele)[0].reset();
       //清空表单样式
       $(ele).find("*").removeClass("has-error has-success");
       $(ele).find(".help-block").text("");
   }


   //查出所有的部门信息并显示在下拉列表中
   function getDepts(ele){
       //清空之前下拉列表的值
       $(ele).empty();
       $.ajax({
           url:"${pageContext.request.contextPath}/depts",
           type:"GET",
           success:function(result){
               //{"code":100,"msg":"处理成功！",
               //"extend":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}
               //console.log(result);
               //显示部门信息在下拉列表中
               //$("#empAddModal select").append("")
               $.each(result.extend.depts,function(){
                   var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                   optionEle.appendTo(ele);
               });
           }
       });

   }
                              /*新增页面初始化窗口*/



   /**********************************************************************************************************************/
                                                        /*新增功能*/

   //校验用户名是否可用
   $("#empName_add_input").change(function(){        //当元素的值改变时发生 change 事件（仅适用于表单字段）。
       //发送ajax请求校验用户名是否可用
       var empName = this.value;
       $.ajax({
           url:"${pageContext.request.contextPath}/checkuser",
           data:"empName="+empName,
           type:"POST",
           success:function(result){
               if(result.code==100){
                   show_validate_msg("#empName_add_input","success","用户名可用");
                   $("#emp_save_btn").attr("ajax-va","success");             //给提交按钮绑定一个  参数  铺垫
               }else{
                   show_validate_msg("#empName_add_input","error",result.extend.va_msg);

                   $("#emp_save_btn").attr("ajax-va","error");
               }
           }
       });
   });

   //显示校验结果的提示信息
   function show_validate_msg(ele,status,msg){
       //清除当前元素的校验状态
       $(ele).parent().removeClass("has-success has-error");
       $(ele).next("span").text("");
       if("success"==status){
           $(ele).parent().addClass("has-success");
           $(ele).next("span").text(msg);
       }else if("error" == status){
           $(ele).parent().addClass("has-error");
           $(ele).next("span").text(msg);
       }
   }


   //点击保存，保存员工。
   $("#emp_save_btn").click(function(){
       //1、模态框中填写的表单数据提交给服务器进行保存  //1、先对要提交给服务器的数据进行校验
       if(!validate_add_form()){
           return false;
       };
       //1、判断之前的ajax用户名校验是否成功。如果成功。
       if($(this).attr("ajax-va")=="error"){

           show_validate_msg("#empName_add_input","error","用户名错误");
           return false;
       }

       //2、发送ajax请求保存员工
       $.ajax({
           url:"${pageContext.request.contextPath}/emp",
           type:"POST",

          /*这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()，举例如下*/
           data:$("#empAddModal form").serialize(),
           success:function(result){
               //alert(result.msg);
               if(result.code == 100){
                   //员工保存成功；
                   //1、关闭模态框
                   $("#empAddModal").modal('hide');

                   //2、来到最后一页，显示刚才保存的数据
                   //发送ajax请求显示最后一页数据即可
                   to_page(totalRecord);
               }else{
                   //显示失败信息
                   //console.log(result);
                   //有哪个字段的错误信息就显示哪个字段的；
                   if(undefined != result.extend.errorFields.email){
                       //显示邮箱错误信息
                       show_validate_msg("#email_add_input", "error", result.extend.errorFields.email);
                   }
                   if(undefined != result.extend.errorFields.empName){
                       //显示员工名字的错误信息
                       show_validate_msg("#empName_add_input", "error", result.extend.errorFields.empName);
                   }
               }
           }
       });
   });


   //校验表单数据
   function validate_add_form(){
       //1、拿到要校验的数据，使用正则表达式
       var empName = $("#empName_add_input").val();
       var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
       if(!regName.test(empName)){
           //alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
           show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");
           return false;
       }else{
           show_validate_msg("#empName_add_input", "success", "");
       };

       //2、校验邮箱信息
       var email = $("#email_add_input").val();
       var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
       if(!regEmail.test(email)){
           //alert("邮箱格式不正确");
           //应该清空这个元素之前的样式
           show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
           /* $("#email_add_input").parent().addClass("has-error");
           $("#email_add_input").next("span").text("邮箱格式不正确"); */
           return false;
       }else{
           show_validate_msg("#email_add_input", "success", "");
       }
       return true;
   }
                                          /*新增功能*/
/**********************************************************************************************************************/

   /*编辑修改功能*/

   //1、我们是按钮创建之前就绑定了click，所以绑定不上。
   //1）、可以在创建按钮的时候绑定。    2）、绑定点击.live()
   //jquery新版没有live，使用on进行替代
   $(document).on("click",".edit_btn",function(){
       //alert("edit");


       //1、查出部门信息，并显示部门列表
       getDepts("#empUpdateModal select");
       //2、查出员工信息，显示员工信息
       getEmp($(this).attr("edit-id"));

       //3、把员工的id传递给模态框的更新按钮
       $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));

       $("#empUpdateModal").modal({
           backdrop:"static"
       });
   });

   function getEmp(id){
       $.ajax({
           url:"${pageContext.request.contextPath}/emp/"+id,
           type:"GET",
           success:function(result){
               //console.log(result);
               var empData = result.extend.emp;
               $("#empName_update_static").text(empData.empName);
               $("#email_update_input").val(empData.email);
               $("#empUpdateModal input[name=gender]").val([empData.gender]);
               $("#empUpdateModal select").val([empData.dId]);
           }
       });
   }

   //点击更新，更新员工信息
   $("#emp_update_btn").click(function(){
       //验证邮箱是否合法
       //1、校验邮箱信息
       var email = $("#email_update_input").val();
       var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
       if(!regEmail.test(email)){
           show_validate_msg("#email_update_input", "error", "邮箱格式不正确");
           return false;
       }else{
           show_validate_msg("#email_update_input", "success", "");
       }

       //2、发送ajax请求保存更新的员工数据
       $.ajax({
           url:"${pageContext.request.contextPath}/emp/"+$(this).attr("edit-id"),
           type:"PUT",
           data:$("#empUpdateModal form").serialize(),         //表单提交的作用
           success:function(result){

               /*这里最好判断一下后端有没有更新成功*/
               //alert(result.msg);
               //1、关闭对话框
               $("#empUpdateModal").modal("hide");
               //回到当前页面
               to_page(currentPage);
           }
       });
   });
                                    /*编辑更新*/
   /*********************************************************************************************/

   //单个删除
   $(document).on("click",".delete_btn",function(){
       //1、弹出是否确认删除对话框
       var empName = $(this).parents("tr").find("td:eq(2)").text();
       var empId = $(this).attr("del-id");
       //alert($(this).parents("tr").find("td:eq(1)").text());
       if(confirm("确认删除【"+empName+"】吗？")){
           //确认，发送ajax请求删除即可
           $.ajax({
               url:"${pageContext.request.contextPath}/emp/"+empId,
               type:"DELETE",
               success:function(result){
                   alert(result.msg);
                   //回到本页
                   to_page(currentPage);
               }
           });
       }
   });
 //  $("#check_all").prop("checked",false);

   //完成全选/全不选功能
   $("#check_all").click(function(){
       //attr获取checked是undefined;
       //我们这些dom原生的属性；attr获取自定义属性的值；
       //prop修改和读取dom原生属性的值
       $(".check_item").prop("checked",$(this).prop("checked"));
   });
   //点击全部删除，就批量删除
   $("#emp_delete_all_btn").click(function(){
       //
       var empNames = "";
       var del_idstr = "";
       $.each($(".check_item:checked"),function(){
           //this
           empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
           //组装员工id字符串
           del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
       });
       //去除empNames多余的,
       empNames = empNames.substring(0, empNames.length-1);
       //去除删除的id多余的-
       del_idstr = del_idstr.substring(0, del_idstr.length-1);
       if(confirm("确认删除【"+empNames+"】吗？")){
           //发送ajax请求删除
           $.ajax({
               url:"${pageContext.request.contextPath}/emp/"+del_idstr,
               type:"DELETE",
               success:function(result){
                   alert(result.msg);
                   //回到当前页面
                   to_page(currentPage);
               }
           });
       }
   });



</script>


</body>
</html>